<template>
    <div>
        <Form ref="form" v-bind="$attrs" v-on="$listeners" inline :label-width="labelWidth" :label-position='labelPosition' class="grid" :style="style" >
           <slot></slot>
        </Form>
    </div>
</template>
<script>
    export default {
        props:{
            column:{
                type:[String,Number],
                default:2
            },
            // 表单域标签的宽度
            labelWidth:{
                type:[String,Number],
            },
            // 表单域标签的位置，支持left，top，right
            labelPosition:{
                type:String,
                default:null
            },
            columnGap:{
                type:[String,Number],
                default:30
            },
            rowGap:{
                type:[String,Number],
                default:10
            },
            colon:{
                type:[Boolean],
                default:false
            }
        },
        provide(){
            return{
                'grid':this
            }
        },
        computed:{
            style(){
                return{
                    // 设置的列的状态，可以根据this.column设置当前行有几列,fr是等份，代表可用剩余宽度的分配
                    'grid-template-columns' : `repeat(${this.column},1fr)`,
                    //设置行列间距
                    'grid-column-gap':this.columnGap + 'px',
                    'grid-row-gap':this.rowGap + 'px'
                }
            }
        },
        methods:{
            validate(callback){
                //如果有  没有校验的表单元素，视图自动显示到这个部分
                // 校验表单
               this.$refs.form.validate(callback);
               let iviewError = document.getElementsByClassName("ivu-form-item-error-tip")
              //  this.$nextTick指的是下一个周期执行
               this.$nextTick(function () {
                    if(iviewError.length > 0){
                        iviewError[0].scrollIntoView({
                            block:'center'
                        })
                    }
               });
               
            }
        }
    }
</script>
<style scoped>
    .grid{
        display: grid;
        grid-template-rows: 1fr;
    }
</style>